<template>
<ul :class="$style.container">
  <li v-for="(item,idx) in lists" :key="'list'+idx" @click.stop="handleItemClick(item)">
    <img v-lazy="item.poster" >
    <div :class="$style.content">
      <h4 :class="$style.title">{{item.original_title}}</h4>
      <div :class="$style.count">{{item.wish_count}}人想看</div>
      <div :class="$style.bottom">
        <div :class="$style.price" v-if="item.price">￥{{item.price.toFixed(2)}}</div>
        <span v-else :class="$style.free">免费</span>
        <div :class="$style.btn" v-if="item.price && !item.isMyFilm">购买</div>
        <div :class="$style.btn" v-else-if="item.price && item.isMyFilm">已购买</div>
      </div>
    </div>
  </li>
</ul>
</template>

<script>
import http from '../../../APIService/http'
export default {
  props: {
    lists: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    // 点击
    handleItemClick (item) {
      if (item.price && !item.isMyFilm) {
        this.handleBuyClick(item)
      } else {
        this.$router.push({
          path: '/detail',
          query: { id: item.doubanId }
        })
      }
    },
    /**
     * 立即购买
     */
    async handleBuyClick (item) {
      try {
        let token = this.$Cookie.getToken()
        if (!token) {
          this.$router.push({
            path: '/login'
          })
          return false
        }
        let params = {
          id: item.doubanId
        }
        let res = await http.post(`/cart/addCart`, params)
        if (res.code === 0) {
          this.$router.push({
            path: '/cart'
          })
        }
      } catch (err) {
        throw err
      }
    }
  }
}
</script>

<style lang='less' module>
.container {
  li {
    padding: 10px;
    img {
      width: 108px;
      height:70px;
      border-radius: 5px;
      object-fit: cover;
      vertical-align: top;
    }
    .content {
      margin-left:10px;
      display: inline-block;
      width: 225px;
      .title {
        color: #2B333B;
        font-size:15px;
        font-weight: bold;
        line-height:20px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      .count {
        margin-top:8px;
        color: #71777D;
        font-size:12px;
        line-height:14px;
      }
      .bottom {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        .price {
          color: red;
          font-size:12px;
          line-height: 14px;
        }
        .free {
          color: #be9e4d;
        }
        .btn {
          display: inline-block;
          color:#fff;
          background: red;
          text-align: center;
          width: 70px;
          height:30px;
          line-height: 30px;
          border-radius: 5px;
        }
      }
    }
  }
}

</style>